<template>
  <div id="index_singer" style="margin-top: 20px;">
    <div class="kind_s_nav">
      <div>
        <span class="pre_all pre_all1" @click="handleSelect('name', 'all')">全部</span>
        <span v-for="(char, index) in nameOptions" 
              :key="`name-${index}`"
              @click="handleSelect('name', char)">
          {{ char }}
        </span>
      </div>

      <div>
        <span class="pre_all pre_all2" @click="handleSelect('area', 'all')">全部</span>
        <span v-for="(area, index) in areaOptions" 
              :key="`area-${index}`"
              @click="handleSelect('area', area)">
          {{ area }}
        </span>
      </div>

      <div>
        <span class="pre_all pre_all3" @click="handleSelect('sex', 'all')">全部</span>
        <span v-for="(sex, index) in sexOptions" 
              :key="`sex-${index}`"
              @click="handleSelect('sex', sex)">
          {{ sex }}
        </span>
      </div>

      <div>
        <span class="pre_all pre_all4" @click="handleSelect('kind', 'all')">全部</span>
        <span v-for="(kind, index) in kindOptions" 
              :key="`kind-${index}`"
              @click="handleSelect('kind', kind)">
          {{ kind }}
        </span>
      </div>
    </div>

    <div class="all_display_box">
      <RouterView />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 选项数据
const nameOptions = ref(['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','?']);
const areaOptions = ref(['内陆', '台湾', '非汉语区']);
const kindOptions = ref(['嘻哈', '流行', '伤感']);
const sexOptions = ref(['男', '女', '组合']);

// 选择映射
const selectMap = {
  '全部': 'all',
  '内陆': 'inner',
  '台湾': 'inner_',
  '非汉语区': 'other',
  '嘻哈': 'pop',
  '流行': 'public',
  '伤感': 'sad',
  '男': '1',
  '女': '0',
  '组合': '2'
};

// 当前选择状态
const currentSelections = ref({
  name: 'all',
  area: 'all',
  sex: 'all',
  kind: 'all'
});

// 高亮当前选中项
const highlightSelection = (event) => {
  const parent = event.target.parentNode;
  parent.querySelectorAll('span').forEach(item => {
    item.style.color = '#515a6e';
    item.style.backgroundColor = 'white';
  });
  event.target.style.color = 'white';
  event.target.style.backgroundColor = '#19be6b';
};

// 生成路由路径
const generateRoutePath = () => {
  return `/functions/music/index/singer/${
    currentSelections.value.name}/${
    currentSelections.value.area}/${
    currentSelections.value.sex}/${
    currentSelections.value.kind}`;
};

// 统一处理选择
const handleSelect = (type, value) => {
  const selectionValue = value === 'all' ? 'all' : selectMap[value];
  currentSelections.value[type] = selectionValue;
  
  highlightSelection(event);
  router.replace({
    path: generateRoutePath()
  });
};
</script>

<style scoped>
.kind_s_nav {
  width: 100%;
  margin-left: 200px;
  height: 150px;
}

.kind_s_nav > div {
  margin: 5px 0;
}

.kind_s_nav span {
  user-select: none;
  font-size: 15px;
  margin: 0 10px;
  padding: 3px;
  cursor: pointer;
  display: inline-block;
}

.pre_all {
  background-color: #31c27c;
  color: white;
  border-radius: 5px;
}
</style>